<template>
  <div class="playlist-section">
    <div class="section-header">
      <div class="title">
        <h2>{{ title }}</h2>
        <div class="sub-nav" v-if="type === 'recommend'">
          <span class="active">为你推荐</span>
          <span>官方歌单</span>
          <span>情歌</span>
          <span>网络歌曲</span>
        </div>
      </div>
      <el-button text @click="handleMore">
        更多
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>
    
    <div class="playlist-grid">
      <template v-if="loading">
        <el-skeleton-item
          v-for="i in 6"
          :key="i"
          variant="image"
          style="width: 100%; padding-top: 100%"
        />
      </template>
      <template v-else>
        <playlist-card
          v-for="item in playlists"
          :key="item.id"
          :playlist="item"
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { playlistAPI } from '@/api'
import type { PlaylistInfo } from '@/types'
import PlaylistCard from './PlaylistCard.vue'

const props = defineProps<{
  title: string
  type?: 'recommend' | 'new' | 'digital'
}>()

const router = useRouter()
const playlists = ref<PlaylistInfo[]>([])
const loading = ref(true)

const loadData = async () => {
  try {
    loading.value = true
    let res
    switch (props.type) {
      case 'new':
        res = await playlistAPI.getNewAlbums()
        break
      case 'digital':
        res = await playlistAPI.getDigitalAlbums()
        break
      default:
        res = await playlistAPI.getRecommendPlaylists()
    }
    playlists.value = res.data.slice(0, 5)
  } catch (error) {
    console.error('Failed to load playlists:', error)
  } finally {
    loading.value = false
  }
}

const handleMore = () => {
  switch (props.type) {
    case 'new':
      router.push('/new-albums')
      break
    case 'digital':
      router.push('/digital-albums')
      break
    default:
      router.push('/playlists')
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.playlist-section {
  margin: 40px 0;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      display: flex;
      align-items: center;
      gap: 30px;
      
      h2 {
        font-size: 24px;
        font-weight: bold;
      }
      
      .sub-nav {
        display: flex;
        gap: 20px;
        
        span {
          cursor: pointer;
          padding: 5px 0;
          position: relative;
          
          &.active {
            color: $primary-color;
            
            &::after {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 100%;
              height: 2px;
              background: $primary-color;
            }
          }
          
          &:hover {
            color: $primary-color;
          }
        }
      }
    }
  }

  .playlist-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
}
</style> 